<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('图书推荐首页')">
	<meta charset="UTF-8">
</head>
<body>
<body>
<div id="mainDiv" style="width: 100%; height: 100%;">
<!-- 头部 -->
<div style="height: 5%; width: 100%; background-color: #E3E4E5;">
	<div style="width: 28%; float: left; margin-left: 2%; padding-top: 5px;">
		您好: <font style="font-family: '宋体'; font-size: 14px;" th:text="${username}"></font>
	</div>
	<div style="width: 70%; float: right; padding-top: 6px;">
		<div style="float: right; margin-right: 10px; cursor: pointer; font-size: 10px;"><font>退出系统 </font><i class="icon icon-off"></i></div>
		<div style="float: right; margin-right: 35px; cursor: pointer;"><font>我的收藏</font></div>
		<div style="float: right; margin-right: 35px; cursor: pointer;"><font>我的借阅</font></div>
		<div style="float: right; margin-right: 35px; cursor: pointer;"><font>我的评论</font></div>
	</div>
</div>
<!-- 中间主体 -->
<div style="height: 6%; width: 90%; margin-left: 5%; padding-top: 5px;">
	<div class="parentIndex">
		<input type="text" v-model="paramJson.name">
		<input type="button" value="图书搜索" @click="searchBook">
	</div>
</div>
<div style="width: 100%; height: 74%; overflow: scroll;">
	<div style="width: 90%; margin-left: 5%;" class="cards">
		<div class="col-md-3 col-sm-3 col-lg-2" v-for="(data, index) in modelList">
		<a class="indexCard" style="text-decoration: none;" href="javascript:;">
			<img v-show="data.coverImagePath == null" th:src="@{/static/images/defaultBookImage.png}" style="width: 50%; height: 50%;" alt="">
			<img v-show="data.coverImagePath != null" :src="imageDownLoadPath + data.id" style="width: 50%; height: 50%;" alt="">
			<div class="card-heading"><strong>{{data.name}}</strong></div>
			<div class="card-content text-muted" style="padding: 0px; padding-left: 10px;">图书作者：{{data.author == null ? '暂无' : data.author}}</div>
			<div class="card-content text-muted">图书价格：￥{{Number(data.price).toFixed(2)}}</div>
			<div class="card-content">
				<button type="button" class="btn btn-danger btn-mini"><i class="icon-star-empty"></i> 收藏</button>
				<button type="button" class="btn btn-warning btn-mini"><i class="icon-book"></i> 借阅</button>
				<div class="pull-right"><i class="icon-comments-alt"></i> 评论</div>
			</div>
		</a>
		</div>
		<div v-show="modelList == null || modelList.length == 0" style="padding-top: 100px; font-size: 18px; text-align: center;">
			<font>找不到查询的图书数据！</font>
		</div>
		<div id="Pagination" class="pagination" style="margin-left: 65%; width: 35%; float: left;"></div>
	</div>
</div>
<!-- 尾部 -->
<div style="width: 100%; height: 15%; border: solid 1px #E3E4E5;">
	<div style="width: 100%; height: 20%;">
		<font style="margin-left: 20px; font-weight: 800;">猜您喜欢</font>
	</div>
	<div style="width: 100%; height: 80%; overflow: scroll; margin-left: 10px;" class="cards">
		<div class="indexCard" style="width: 12%; height: 100%; float: left; border: solid 1px #000; margin-left: 2px;" v-for="(d, i) in recommendList">
			<img th:src="@{/static/images/defaultBookImage.png}" style="height: 100%; width: 35%; float: left;"/>
			<div style="height: 100%; width: 65%; float: left;">
				<div style="width: 100%;"><font style="font-size: 6px;">图书名称: {{d.name}}</font></div>
				<div style="width: 100%;"><font style="font-size: 6px;">图书作者: {{d.author == null ? '暂无' : d.author}}</font></div>
			</div>
		</div>
		<div style="width: 100%; text-align: center;" v-show="recommendList == null || recommendList.length == 0">
			<font style="font-size: 18px; font-family: '宋体'">暂无推荐!</font>
		</div>
	</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
window.onload = function(){
	let height = window.innerHeight;
	let mainBodyDom = document.getElementById("mainDiv");
	mainBodyDom.style.height = (height - 10) + 'px';
}
const BASE_PATH = [[@{/}]];
const URLS = {
	APIS: {
		BOOK_LIST: BASE_PATH+'/restful/book/list',
		GET_RECOMMEND_LIST: BASE_PATH+'/restful/algorithm/cf/userBasedRecommender'
	}
};
var app = new Vue({
	el: '#mainDiv',
	data: {
		modelList: [],
		recommendList: [],
		paramJson: {
			name: ''
		},
		paginationJson: {
			total: 0,
			number: 0,
			size: 18
		},
		imageDownLoadPath: BASE_PATH + '/restful/book/downloadBookImage/'
	},
	methods: {
		init: function() {
			let _this = this;
			axios.post(URLS.APIS.BOOK_LIST, _this.paginationJson)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					_this.modelList = data.content;
					_this.$set(_this.paginationJson, 'total', data.total);
					_this.$set(_this.paginationJson, 'number', data.number);
					_this.$set(_this.paginationJson, 'size', data.size);
					_this.pagination();
				}
			}).catch(function (error) {
			});
			/*
			* 获取推荐的结果列表
			*/
			let userGuid = [[${session.SESSION_USER.userGuid}]];
			let recommendReq = {
				userGuid: userGuid,
				maxSize: 10,
				similarityType: 0
			};
			axios.post(URLS.APIS.GET_RECOMMEND_LIST, recommendReq)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					console.log(data);
					_this.recommendList = data.books;
				}
			}).catch(function (error) {
			});
		},
		searchBook: function() {
			let _this = this;
			let req = _this.paginationJson;
			req.entity = _this.paramJson;
			axios.post(URLS.APIS.BOOK_LIST, req)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					console.log(data);
					_this.modelList = data.content;
					_this.$set(_this.paginationJson, 'total', data.total);
					_this.$set(_this.paginationJson, 'number', data.number);
					_this.$set(_this.paginationJson, 'size', data.size);
					_this.pagination();
				}
			}).catch(function (error) {
			});
		},
		paginationSize: function() {
			this.$set(this.paginationJson, 'number', 0);
			this.pagination();
		},
		pagination: function() {
			$("#Pagination").pagination(this.paginationJson.total, {
				"num_edge_entries" : 2,
				"num_display_entries" : 5,
				"callback" : this.pageselectCallback,
				"current_page" : this.paginationJson.number,
				"items_per_page" : this.paginationJson.size
			});
		},
		pageselectCallback: function(number) {
			this.$set(this.paginationJson, 'number', number);
			app.init();
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
<style type="text/css">
	.parentIndex {
		width: 100%;
	}
	.parentIndex>input:first-of-type {
		/*输入框高度设置为40px, border占据2px，总高度为42px*/
		width: 380px;
		border: 1px solid #ccc;
		font-size: 16px;
		outline: none;
	}
	.parentIndex>input:first-of-type:focus {
		border: 1px solid #F30213;
	}
	.parentIndex>input:last-of-type {
		/*button按钮border并不占据外围大小，设置高度42px*/
		width: 100px;
		position: absolute;
		background: #F30213;
		border: 1px solid #F30213;
		color: #fff;
		font-size: 16px;
		outline: none;
	}
	a:active, a:hover {}
	.indexCard {
	    position: relative;
	    display: block;
	    padding: 0;
	    margin-bottom: 20px;
	    overflow: hidden;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	    transition: all .4s cubic-bezier(.175, .885, .32, 1);
	    height: 260px;
	}
	.indexCard .card-heading {
		display: block;
	    padding: 10px;
	    margin: 0;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.indexCard .card-content {
	    padding: 0 10px 10px 10px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	</style>
</html>